Transcript ders notları
IT504 Javascript MVC çerçeveleri Yrd. Doç. Dr. Yuriy Mishchenko
Plan
• • • • • MVC nedir – Problem – Çözüm – Etkileşim modeli Temel MVC örneği – öğrenci kayıt sistemi Javascript MVC çerçeveleri temeli Backbone – Nesneler ve özellikleri – RESTful arayüzleri – Örnek Angular.js
– Ana mantığı • Şablonlama kullanarak tasarım (HTML templating) • İfadeler ve direktivler (expressions and directives) • veri bağlamaları (data binding) – Yarışıcı rakamları tablosu örneği http://www.scinetcentral.com/~mishchenko/MIT504.html
2
MVC nedir?
• • • • MVC bir yazılım geliştirme desenidir MVC'de yazılım geliştirme işi, üç tipik bölüme başından ayrılır ve sonraki geliştirme bu üç bölüm çerçeve içerisinde gerçekleştirilir MVC üç bölümü, – Model – – Görünüm Yönetici MVC, ingilizcede Model-View-Controller demektir http://www.scinetcentral.com/~mishchenko/MIT504.html
3
MVC nedir?
• MVC çerçevesi şu ana problemlerine çözüm sağlamaya çalışır – Yazılımın kullanıcı arayüzü, tipik olarak yazılımın iş mantığından daha hızlı ve daha sıkca değişir ve değişebilir – Yazılım, tipik olarak aynı verileri birçok farklı şekilde göstermek zorunda ve bu tüm görünümler yazılımın verileri ile sync'te olmalı, yani verilerin değiştiğinde aynı zamanda güncelleştirilmelidir – Kullanıcı arayüzlerinin geliştirilmesi, tipik olarak farklı becerileri gerektiriyor ve aslı programcıdan farklı olan tasarımcı tarafından geliştirilir – Yazılımın ara yüzünün çalışması, tipik olarak iki faaliyetten oluşur – veri gösterme ve veri güncelleştirme – Yazılımın ara yüzleri, tipik olarak farklı cıhazlar için yeniden geliştirilmeli fakat iş mantığı bu süreçte değişmez – Yazılımın ara yüzü düzeltme, tipik olarak yazılımın iş mantığından daha zahmetli ve iş mantığından ayrıldığından faydalanır http://www.scinetcentral.com/~mishchenko/MIT504.html
4
MVC nedir?
• Bu problemlerin çözümü önermek için, MVC çerçeve yazılımın tipik olan veri ve iş mantığı, kullanıcı ara yüzü ve ikisinin etkileşimini ayarlanan yönetici fonksiyonları açıkça ayrıyor http://www.scinetcentral.com/~mishchenko/MIT504.html
5
MVC nedir?
• Model, ilgili veri içeren, yöneten, dışarı sunan, ve dışardan gelen talimatlara göre tutarlı şekilde güncelleştiren yazılım projesinin bir mödülü dür http://www.scinetcentral.com/~mishchenko/MIT504.html
6
MVC nedir?
• View veya Görünüm, bilgi kullanıcıya göstermeyi kontröl eden ve kullanıcı ile etkileşimi ayarlayan yazılım projesinin mödülü dür http://www.scinetcentral.com/~mishchenko/MIT504.html
7
MVC nedir?
• Controller veya Yönetici, kullanıcının komutları yorumlayan ve modelde ve görünümde ilgili değişiklikleri yapmayı talep eden yazılım projesinin bir modülü dür http://www.scinetcentral.com/~mishchenko/MIT504.html
8
Model
MVC nedir?
Controller View http://www.scinetcentral.com/~mishchenko/MIT504.html
9
MVC nedir?
Controller Model Model, yazılımın verilerini ayarlar ve View'e gereken şekilde sunar http://www.scinetcentral.com/~mishchenko/MIT504.html
View 10
MVC nedir?
Controller Model View View, kullanıcıya veri sunar ve kullanıcıdan komutları alır http://www.scinetcentral.com/~mishchenko/MIT504.html
11
Model
MVC nedir?
Controller, Model ve View arasındaki etkileşimi ayarlar Controller View http://www.scinetcentral.com/~mishchenko/MIT504.html
12
MVC nedir?
• (Microsoft Developer Network MVC sayfası) : Önemli not yapılmalı: MVC çerçevesinde View ve Controller ikiside Modele bağlıdır. Ancak, model hem View hemde Controller'den bağımsızdır. Bu özellik, MVCdeki ayırmanın anahtar özelliği. Bu ayırma, modeli bağımsız geliştirme ve düzeltmeye önemli fırsat sağlar.
http://www.scinetcentral.com/~mishchenko/MIT504.html
13
MVC nedir?
• Bu ayırma, birçok zengin internet uygulamalarında (RIAda) arka planına götürülür; aslında birçok kullanıcı arayüzü çerçevesi bu tüm rolları tek bir nesne olarak temsil eder. Ancak Web Uygumalarında bu ayırma – web tarayıcı View olarak ve sunucu skriptleri Controller olarak – başında ve çok açık şekilde mevcuttur.
http://www.scinetcentral.com/~mishchenko/MIT504.html
14
MVC nedir?
• Model-View-Controller, kullanıcı arayüzleri iş mantığından ayırmak için temel tasarım deseni dir.
http://www.scinetcentral.com/~mishchenko/MIT504.html
15
MVC Örneği: Öğrenci kayıt sistemi
• • Örnek olarak, bir üniversitenin öğrenci kayıt sisteminin yazılımı geliştirme sürecini düşünelim MVC çerçeveye göre, bu geliştirme süreci baştan üç ayrı bölgeye ayrıldırılmalı http://www.scinetcentral.com/~mishchenko/MIT504.html
16
MVC Örneği: Öğrenci kayıt sistemi
– (buradaki) Model - Öğrenci bilgileri Güncelleştirme yöntemleri Bilgi yöntemleri http://www.scinetcentral.com/~mishchenko/MIT504.html
17
MVC Örneği: Öğrenci kayıt sistemi
– (buradaki) Model - Öğrenci bilgileri Güncelleştirme yöntemleri Bilgi yöntemleri Ayrıca Model, bunların bir kümesi veya kolleksiyon şeklinde organize edilecektir http://www.scinetcentral.com/~mishchenko/MIT504.html
18
MVC Örneği: Öğrenci kayıt sistemi
– (buradaki) Model - Öğrenci bilgileri Güncelleştirme yöntemleri Bilgi yöntemleri –(buradaki) View – Tüm öğrencileri tablo görünümü Tek öğrenci bilgi görünümü Para ödememiş öğrenci tablo görünümü Öğrenci bilgi güncelleştirme görünümü http://www.scinetcentral.com/~mishchenko/MIT504.html
19
MVC Örneği: Öğrenci kayıt sistemi
– (buradaki) Model - Öğrenci bilgileri Güncelleştirme yöntemleri Bilgi yöntemleri –(buradaki) View – Tüm öğrencileri tablo görünümü Tek öğrenci bilgi görünümü Para ödememiş öğrenci tablo görünümü Öğrenci bilgi güncelleştirme görünümü Görünüme bağlı veri güncelleştirme talepleri –(buradaki) Controller – Controller yöntemleri Görünümü seç Kullanıcının girişini al http://www.scinetcentral.com/~mishchenko/MIT504.html
20
MVC Örneği: Öğrenci kayıt sistemi
Bu şekilde tasarlanan yazılım, MVC çerçevesi içinde tasarlanmıştır – Model -
Öğrenci bilgileri Güncelleştirme yöntemleri Bilgi yöntemleri
–View –
Tüm öğrencileri tablo görünümü Tek öğrenci bilgi görünümü Para ödememiş öğrenci tablo görünümü Öğrenci bilgi güncelleştirme görünümü Görünüme bağlı veri güncelleştirme talepleri
– Controller –
Controller yöntemleri http://www.scinetcentral.com/~mishchenko/MIT504.html
Görünümü seç Kullanıcının girişini al 21
Javascript MVC çerçeveleri
• • Javascript MVC çerçeveleri, karmaşık RIA geliştirmede kullanılan web geliştirme çerçeveleridir Şu anda en pöpüler olan MVC çerçeveleri Backbone.js, Ember.js ve Angular.js
http://www.scinetcentral.com/~mishchenko/MIT504.html
22
Javascript MVC çerçeveleri
• Backbone.js kullanarak geliştirilmiş siteleri – USA Today (gazet) – Hulu (online TV sitesi) – Foursquare (sosyal ağ sitesi) – Disqus (online yorumlama hizmeti) – Khan Academi (online eğitim hizmeti) – Diaspora (sosyal ağ sistemi) – Pandora (online radio sitesi) – ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
23
Javascript MVC çerçeveleri
• Ember.js kullanarak geliştirilmiş siteleri – Yahoo (İnternet portalı) – Zendesk (customer service hizmet sitesi) – Groupon (online kupon hizmeti) – Discourse (online yorumlama hizmeti) – Square (online ödeme hizmeti) – Livinsocial (sosyal ağ sitesi) – Yapp (mobile app geliştirme sitesi) – ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
24
Javascript MVC çerçeveleri
• Angular.js kullanarak geliştirilmiş siteleri (Google'nin Javascript MVC çerçevesi) – PS3 için YouTube sitesi (online video hizmeti) – Crunchinator (Chrunchbase blogu için veri incelenmesi) – Musik365 (online radio hizmeti) – Posse (online sosyal oyun) – openTaste (sosyal ağı sitesi – ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
25
Javascript MVC çerçeveleri nedir?
• Javascript MVC çerçeveleri genellikle – "Model" için kullanılacak özel bir nesne sunar • • MVC'nin modellerinin temel yapıları tanımlar Modelin özellikleri ayarlama aletleri sunar • AJAX kullanarak sunucu ile model verilerini indirme/yükleme/sync etme araçları sunar – – View olarak HTML kullanılır Controller için özel bir nesne sunar • Bu nesne modelin haline bağlı olayların bağlamayı yönetir • • HTML parse (ayrıştırma) ve templating (şablonlama) yapar Görünümleri ayarlar http://www.scinetcentral.com/~mishchenko/MIT504.html
26
Javascript MVC çerçeveleri nedir?
RIA Controller • • • "controller" nesnesi olay bağlama HTML pars etme Görünüm ayarlama Veriler olay bağlama • • • "model" nesnesi temel yapıları Özellikleri ayarlama aletleri AJAX sunucu ile sync etme araçları Görünümler { HTML } olay bağlama http://www.scinetcentral.com/~mishchenko/MIT504.html
27
Javascript MVC çerçeveleri nedir?
RIA Veriler olay bağlama • • • "model" nesnesi temel yapıları Özellikleri ayarlama aletleri AJAX sunucu ile sync etme araçları Görünümler { HTML } Controller olay bağlama • • • "controller" nesnesi olay bağlama HTML pars etme Görünüm ayarlama http://www.scinetcentral.com/~mishchenko/MIT504.html
Javascript MVC çerçeveleri
28
Backbone.js temelleri
• • Backbone.js, şu anda en pöpüler olan ve birçok büyük kurum tarafından kullanılan jMVC çerçevesi Backbone.js, MVC geliştirmesi için birkaç temel nesne sağlar – Model – Collection – View – Router http://www.scinetcentral.com/~mishchenko/MIT504.html
29
Backbone.js temelleri
• • • Backbone "model" nesnesi, uygulamanın verilerinin modelleri tanımlamak için kullanılır Model nesnesi, verileri ve onlarla çalışan iş mantık fonksiyonları içermeli Model nesneleri genellikle toplu olarak bir Collection içinde kullanılır http://www.scinetcentral.com/~mishchenko/MIT504.html
30
Backbone.js temelleri
Todo = Backbone.Model.extend({ title: null, order: null, done: false, defaults: function() { return { title: "boş todo...", order: Todos.nextOrder(), done: false }; }, toggle: function() { this.save({done: !this.get("done")}); } }); • • TODO listesinde kullanılacak, TODO bir elemanını temsil eden model; model üç özellikli todo elemanı tanımlar, default değerleri tanımlar, ve "toggle" bir eylemi tanımlar http://www.scinetcentral.com/~mishchenko/MIT504.html
31
Backbone.js temelleri
• Model nesnesinin en önemli özellikleri: – .extend, model nesnesi üzerinde yeni genişletmiş bir modeli oluşturma – – .initialize, ilgili nesne oluşturduğunda çalışacak yapıcı fonksiyon .defaults, ilk değerlerinin atanması – – .get/set, model attribütlerinin atanıp okunması .has/unset/clear, model attribütlerinin ayarlanması – .id, model nesnesinin özel kimliği – – .attributes, model nesnesinin özelliklerinin özgün hash'i .sync/fetch/save, AJAX ve RESTfull arayüzü kullanarak sunucu ile modelinin sync edilmesi – – .parse, sunucudan veri parse etmek için kullanılacak fonksiyon ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
32
Backbone.js temelleri
• Bunlar dışında, .extend tanımı içinde herhangi javascript nesnesi gibi Backbone modellerinde yeni özellik ve yöntemler tanımlanabilir http://www.scinetcentral.com/~mishchenko/MIT504.html
33
Backbone.js temelleri
• Backbone "Collection" nesnesi, uygulamanın tüm modelleri toplu olarak içeren ve onlarla toplu olarak çalışmalara imkan sağlayan bir nesnesi dir http://www.scinetcentral.com/~mishchenko/MIT504.html
34
Backbone.js temelleri
TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Backbone.LocalStorage("todos-backbone"), done: function() { return this.where({done: true}); }, • TODO listesini temsil edip, TODO elemanları içerecek TODO elemanlarının kolleksiyonu remaining: function() { return this.where({done: false}); }, nextOrder: function() { if (!this.length) return 1; return this.last().get('order') + 1; }, comparator: 'order' }); http://www.scinetcentral.com/~mishchenko/MIT504.html
35
Backbone.js temelleri
• Collection nesnesinin en önemli özellikleri: – .extend, collection nesnesi üzerinde yeni genişletmiş koleksiyonun oluşturulması – .model, koleksiyonda içerilecek model nesnesi – .initialize, koleksiyonun oluşturulduğunda çalışacak yapıcı fonksiyonu – .sync/fetch/parse, koleksiyonun sunucuda depolanması ve okunması yöneten fonksiyonlar – .add/remove/reset, koleksiyona elemanları eklemek ve çıkartmak için kullanılan fonksiyonlar – .push/pop/shift/unshift, belirli düzende elemanları eklemek ve çıkartmak için kullanılan fonksiyonlar – – .length, koleksiyonun boyutu .sort, koleksiyonun sıralanması – .comparator, koleksiyonun elemanlarının sırasını belirtmek için kullanılan karşılaştırma fonksiyonu – – .where/findwhere, attribute hash'i kullanarak koleksiyonda arama ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
36
Backbone.js temelleri
• Backbone "View" nesnesi, MVC'nin görünümlerinden biraz farklı olan, RIA'nin arayüzü organize etmek için bir araçtır. HTML ve CSS direkt olarak ayarlamayan, Backbone view'leri var olan HTML yapılarının düzenlenmesi ve olaylar kullanarak modellere bağlanaması ayarlar http://www.scinetcentral.com/~mishchenko/MIT504.html
37
Backbone.js temelleri
AppView = Backbone.View.extend({ el: $("body"), initialize: function () { this.friends = new Friends( null, { view: this }); }, events: { "click #add-friend": "showPrompt", }, showPrompt: function () { var friend_name = prompt("Who is your friend?"); var friend_model = new Friend({ name: friend_name }); this.friends.add( friend_model ); }, addFriendLi: function (model) { $("#friends-list").append("
38
Backbone.js temelleri
• View nesnesinin en önemli özellikleri: – .extend, view nesnesi üzerinde yeni view oluşturulması – .el, bu view tarafından ayarlanan sayfanın HTML elemanı – .initialize, oluşturulduğunda çalışacak yapıcı fonksiyonu – .events, view tarafından ayarlanan olayları – .template, view elemanında HTML şablonlama için kullanılacak şablonlama motoru – .render, model verilere göre ilgili HTML elemanı oluşturan fonksiyonu – ...
http://www.scinetcentral.com/~mishchenko/MIT504.html
39
Backbone.js temelleri
• • • Backbone.js, RESTful arayüzleri üzerinde çalışan bir javascript çerçevesi RESTful arayüzü, "/#/action/param/param" URL kullanarak haberleştirilen eylemler kullanan RIA RIA veya RIA-sunucu iletişim bir model RESTful isteklerinin örneği: – #help – #search/kiwis – #search/kiwis/p7 http://www.scinetcentral.com/~mishchenko/MIT504.html
40
Backbone.js temelleri
• • • Backbone, sunucu ile iletişimde RESTful arayüzünün kullanılmasını varsayır, mesela verileri veritabanına depolamak için veya veritabanından elde etmek için Aynı zamanda Backbone, RIA içinde farklı işlemlerin başlatılması için #-adresler kullanarak RESTful isteklerinin kullanılmasına imkan sağlar Bu tür istekleri yonlendirmek ve işletmek için, Backbone Router nesnesi kullanılır http://www.scinetcentral.com/~mishchenko/MIT504.html
41
Backbone.js temelleri
var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... } }); • Backbone Router nesnesinin kullanımının örneği http://www.scinetcentral.com/~mishchenko/MIT504.html
42
Backbone.js örneği
• • TODO listesi uygulama ( http://backbonejs.org/examples/todos/index.html
) Yapısı: – Model: TODO listesinin elemanı – Collection: TODO listesinin tüm elemanları – View • TODO listesinin elemanın görünümü • TODO listesinin görünümü http://www.scinetcentral.com/~mishchenko/MIT504.html
43
TODO listesinin eleman modeli
Todo = Backbone.Model.extend({ defaults: function() { return { title: "boş todo...", order: Todos.nextOrder(), done: false }; }, toggle: function() { this.save({done: !this.get("done")}); } }); http://www.scinetcentral.com/~mishchenko/MIT504.html
44
TODO listesinin elemanının koleksiyonu
TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Backbone.LocalStorage("todos-backbone"), done: function() { return this.where({done: true}); }, remaining: function() { return this.where({done: false}); }, nextOrder: function() { if (!this.length) return 1; return this.last().get('order') + 1; }, comparator: 'order' }); http://www.scinetcentral.com/~mishchenko/MIT504.html
45
TODO listesinin elemanının görünümü
TodoView = Backbone.View.extend({ tagName: "li", template: _.template($('#item-template').html()), events: { "click .toggle" : "toggleDone", "dblclick .view" : "edit", "click a.destroy" : "clear", "keypress .edit" : "updateOnEnter", "blur .edit" : "close" }, initialize: function() { this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'destroy', this.remove); }, render: function() { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass('done', this.model.get('done')); this.input = this.$('.edit'); return this; }, toggleDone: function() { this.model.toggle(); }, edit: function() { this.$el.addClass("editing"); this.input.focus(); }, close: function() { var value = this.input.val(); if (!value) this.clear(); else { this.model.save({title: value}); this.$el.removeClass("editing"); } }, updateOnEnter: function(e) { if (e.keyCode == 13) this.close(); }, clear: function() { this.model.destroy(); } }); http://www.scinetcentral.com/~mishchenko/MIT504.html
46
TODO listesi görünümü
var AppView = Backbone.View.extend({ el: $("#todoapp"), statsTemplate: _.template($('#stats-template').html()), events: { "keypress #new-todo": "createOnEnter", "click #clear-completed": "clearCompleted", "click #toggle-all": "toggleAllComplete" }, initialize: function() { this.input = this.$("#new-todo"); this.allCheckbox = this.$("#toggle-all")[0]; this.listenTo(Todos, 'add', this.addOne); this.listenTo(Todos, 'reset', this.addAll); this.listenTo(Todos, 'all', this.render); this.footer = this.$('footer'); this.main = $('#main'); Todos.fetch(); }, render: function() { var done = Todos.done().length; var remaining = Todos.remaining().length; if (Todos.length) { this.main.show(); this.footer.show(); this.footer.html(this.statsTemplate({done: done, remaining: remaining})); } else { this.main.hide(); this.footer.hide(); } this.allCheckbox.checked = !remaining; }, addOne: function(todo) { var view = new TodoView({model: todo}); this.$("#todo-list").append(view.render().el); }, addAll: function() { Todos.each(this.addOne, this); }, createOnEnter: function(e) { if (e.keyCode != 13) return; if (!this.input.val()) return; Todos.create({title: this.input.val()}); this.input.val(''); }, clearCompleted: function() { _.invoke(Todos.done(), 'destroy'); return false; }, toggleAllComplete: function () { var done = this.allCheckbox.checked; Todos.each(function (todo) { todo.save({'done': done}); }); } }); http://www.scinetcentral.com/~mishchenko/MIT504.html
47
Backbone.js örneği
• • Arkadaş listesi uygulama (daha basit) ( http://thomasdavis.github.io/2011/02/01/backbon e-introduction.html
) Yapısı: – Model: Arkadaş kaydı – Collection: Tüm arkadaşlar – View: Arkadaş listesi http://www.scinetcentral.com/~mishchenko/MIT504.html
48
TODO listesinin eleman modeli
Friend = Backbone.Model.extend({ name: null }); http://www.scinetcentral.com/~mishchenko/MIT504.html
49
TODO listesinin elemanının koleksiyonu
Friends = Backbone.Collection.extend({ initialize: function (models, options) { this.bind("add", options.view.addFriendLi);} }); http://www.scinetcentral.com/~mishchenko/MIT504.html
50
TODO listesinin elemanının görünümü
AppView = Backbone.View.extend({ el: $("body"), initialize: function () { this.friends = new Friends( null, { view: this });}, events: { "click #add-friend": "showPrompt", }, showPrompt: function () { var friend_name = prompt("Who is your friend?"); var friend_model = new Friend({ name: friend_name }); this.friends.add( friend_model ); }, addFriendLi: function (model) { $("#friends-list").append("
51
Angular.js temelleri
• • Angular.js, şu anda daha az kullanılan ancak Google tarafından geliştirilen ve desteklenen jMVC çerçevesi dir Angular.js, HTML templating (HTML şablonlama) üzerinde temel olarak çalışır http://www.scinetcentral.com/~mishchenko/MIT504.html
52
Angular.js temelleri
• • • HTML şablonlama, bir ayrıştırıcı (parser) uygulama tarafından okunacak HTML koduna özel komutların ve ifadelerin eklenmesi dir HTML şablonlama, birçok sunucu tarafı teknolojide zaten yaygın şekilde kullanılmakta, örneğin ASP, JSP, ve PHP (bir anlamda) hepsi HTML şablonlama kavramını kullanır Angular.js, benzer yaklaşım direkt olarak kullanıcı tarafında RIA tarafından HTML'i ayralanması için kullanır http://www.scinetcentral.com/~mishchenko/MIT504.html
53
Angular.js HTML şablonlama
Drivers Championship Standings | |||
---|---|---|---|
{{$index + 1}} | {{driver.Driver.givenName}} {{driver.Driver.familyName}} |
54
Angular.js HTML şablonlama
Drivers Championship Standings | |||
---|---|---|---|
{{$index + 1}} | {{driver.Driver.givenName}} {{driver.Driver.familyName}} | {{driver.Constructors[0].name}} | {{driver.points}} |
55
Angular.js temelleri
• Angular'ın HTML şablonlama araçları, ifadeler (expressions) ve direktifler (directive) den oluşur http://www.scinetcentral.com/~mishchenko/MIT504.html
56
Angular.js temelleri
• • • İfadeler, {{..}} arasında kapsanan javascript kodların parçalarıdır Şablon ayrıştırılması zaman Angular ifadeleri yerine ilgili javascript kodlarının çıkışı yazılır Bu şekilde oluşturulan HTML dosyası tarayıcı tarafından gösterilir http://www.scinetcentral.com/~mishchenko/MIT504.html
57
Angular.js HTML şablonlama
Drivers Championship Standings | |||
---|---|---|---|
{{$index + 1}} | {{driver.Driver.givenName}} {{driver.Driver.familyName}} | {{driver.Constructors[0].name}} | {{driver.points}} |
58
Angular.js temelleri
• • Direktifler, ng-app, ng-repeat gibi özel Angular komutlarıdır Bunlar, ilgili HTML üzerinde belirli eylemin yapılması ortaya çıkar, örneğin ng- repeat="driver in driversList" direktifi bir driversList koleksiyonundaki tüm driver elemanları kullanarak tablonun satırlarını doldurur http://www.scinetcentral.com/~mishchenko/MIT504.html
59
Angular.js temelleri
• • MVC açısından, Angular.js Model için direkt olarak javascript kullanıyor, View olarak şablonlanmış HTML dosyasını kullanıyor, ve Controller olarak özel Controller nesnesini kullanıyor Ayrıca, Modeller ve Angular şablonlaması kullanarak oluşturulan görünüm arasında iki taraflı olay bağlantıları oluşturulur, yani modelin değiştiğinde ilgili tablo otomatik olarak güncelleştirilecek http://www.scinetcentral.com/~mishchenko/MIT504.html
60
Angular.js temelleri
• Angular'in yapılarının tartıştırmak için, http://www.toptal.com/angular-js/a-step-by step-guide-to-your-first-angularjs-app ' deki örneği kullanarak, formula 1 yarışcılarının durumlarını gösteren bir uygulamaya http://www.scinetcentral.com/~mishchenko/MIT504.html
61
Angular.js temelleri
• • İlgili uygulama iki görünü tanımlar: tüm yarışcıların durum tablosu ve bir yarışçının detaylı bilgileri İlgili görünümleri iki Angular HTML şablonu ile tanımlanır http://www.scinetcentral.com/~mishchenko/MIT504.html
62
Yarışcılar tablosu görünümü
Drivers Championship Standings | |||
---|---|---|---|
{{$index + 1}} | {{driver.Driver.givenName}} {{driver.Driver.familyName}} | {{driver.Constructors[0].name}} | {{driver.points}} |
63
Yarışcılar tablosu görünümü
Uygulama ismi
Drivers Championship Standings | |||
---|---|---|---|
{{$index + 1}} | {{driver.Driver.givenName}} {{driver.Driver.familyName}} Controller nesnesi Tablo dolduran direktif | {{driver.Constructors[0].name}} | {{driver.points}} |
64
Yarışcı bilgisi görünümü
65
Yarışcı bilgisi görünümü
66
Angular.js temelleri
• Bizim Controller nesnesi, iki görünüm için verilerin sunucudan indirilmesini yönetir ve tabloda filtreme yönetir; aslında bu hedefler için iki ayrı controller tanımlanır http://www.scinetcentral.com/~mishchenko/MIT504.html
67
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.controllers', [])
.controller('driversController',
function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) { var re = new RegExp($scope.nameFilter, 'i'); return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName); }; ergastAPIservice.getDrivers().success(function (response) { $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); })
.controller('driverController',
function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); }); http://www.scinetcentral.com/~mishchenko/MIT504.html
68
Angular.js temelleri
• • • Angular'ın herhangi bir Controller nesnesi, özel bir veri yapısı üzerinde çalışıyor, default olarak
$scope
diye adlandırılan.
Bu veri yapısı, belirli RIA ile ilgili tüm verileri içerir Scope değişkenin kapsamı
ng-app
kullanarak belirtilir.
direktif http://www.scinetcentral.com/~mishchenko/MIT504.html
69
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.controllers', []).controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) { var re = new RegExp($scope.nameFilter, 'i'); return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName); }; ergastAPIservice.getDrivers().success(function (response) { $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); }).controller('driverController', function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); }); http://www.scinetcentral.com/~mishchenko/MIT504.html
70
Angular.js temelleri
• Controller verileri sunucudan, özel servisi kullanarak indirir http://www.scinetcentral.com/~mishchenko/MIT504.html
71
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.controllers', []).controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) { var re = new RegExp($scope.nameFilter, 'i'); return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName); }; ergastAPIservice.getDrivers().success(function (response) {$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); }).controller('driverController', function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); }); http://www.scinetcentral.com/~mishchenko/MIT504.html
72
Angular.js temelleri
• Angular servisler, AJAX kullanan HTTP istek yapabilen araçlardır http://www.scinetcentral.com/~mishchenko/MIT504.html
73
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.services', [])
.factory('ergastAPIservice',
function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json}); } ergastAPI.getDriverDetails = function(id) { } return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json' }); } return ergastAPI; }); http://www.scinetcentral.com/~mishchenko/MIT504.html
74
Angular.js temelleri
• AJAX isteklerini uygulamak için, $http fonksiyonu kullanılır, ve iki veriler tipi indiren iki servis-fonksiyonu tanımlanır http://www.scinetcentral.com/~mishchenko/MIT504.html
75
Yarışçı uygulamanın yönetici nesneleri
angular.module('F1FeederApp.services', []).factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json}); } ergastAPI.getDriverDetails = function(id) { } return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json' }); } return ergastAPI; }); http://www.scinetcentral.com/~mishchenko/MIT504.html
76
Angular.js temelleri
• • Backbone gibi, RIA içinde navigasyon için Angular RESTful kaynaklarının kullanımı önerir İlgili RIA RESTful kaynakları tanımlamak için, Angular router nesnesi kullanılır http://www.scinetcentral.com/~mishchenko/MIT504.html
77
Yarışçı uygulamanın route tablosu
angular.config(['$routeProvider', function($routeProvider) { $routeProvider.
when("/drivers", {templateUrl: "yarıscı_tablosu.html", controller: "driversController"}).
when("/drivers/:id", {templateUrl: "yarıscı_bilgileri.html", controller: "driverController"}).
otherwise({redirectTo: '/drivers'}) ; }] ); http://www.scinetcentral.com/~mishchenko/MIT504.html
78
Angular.js temelleri
• Tam olarak, Angular uygulaması bu şekilde oluşturuldu: – yarıscı_tablosu.html görünüm ve yarıscı_bilgileri.html ilgili şabonlanmış HTML dosyasını kullanarak belirtilmiş iki – AJAX kullanarak sunucudan verileri okuyan ve kullanıcı tarafında ilgili veri yapıları ayarlayan iki görünüm için driversController ve driverController iki yönetici nesnesi – Sunucu ile iletişimi ayarlayan
ergastAPIservice
nesnesi servis – RESTful route tablosu http://www.scinetcentral.com/~mishchenko/MIT504.html
79
Angular.js temelleri
• Bunlar toplu olarak şu şekilde tanımlanır – Modüllerin tanımı: angular.module('F1FeederApp', [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ]). config(['$routeProvider', function($routeProvider) { $routeProvider. when("/drivers", {templateUrl: "partials/drivers.html", controller: "driversController"}). when("/drivers/:id", {templateUrl: "partials/driver.html", controller: "driverController"}). otherwise({redirectTo: '/drivers'}); }]); http://www.scinetcentral.com/~mishchenko/MIT504.html
80
Yarışçı uygulamanın yöneticisi
angular.module('F1FeederApp.controllers', []).controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) { }; var re = new RegExp($scope.nameFilter, 'i'); return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName); ergastAPIservice.getDrivers().success(function (response) {$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); }).controller('driverController', function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); }); http://www.scinetcentral.com/~mishchenko/MIT504.html
81
Yarışçı uygulamanın AJAX servisi
angular.module('F1FeederApp.services', []).factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { } return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json}); ergastAPI.getDriverDetails = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json' }); } } return ergastAPI; }); http://www.scinetcentral.com/~mishchenko/MIT504.html
82
Uygulamanın ana dosyası
83
Yarışcılar tablosu görünümü
Drivers Championship Standings | |||
---|---|---|---|
{{$index + 1}} | {{driver.Driver.givenName}} {{driver.Driver.familyName}} |
84
Yarışcı bilgisi görünümü
Team: {{driver.Constructors[0].name}}
Birth: {{driver.Driver.dateOfBirth}}
Biography http://www.scinetcentral.com/~mishchenko/MIT504.html
85
http://www.scinetcentral.com/~mishchenk o/MIT504.html
86